<template>
	<view class="content">
		<view class="title">密码登录</view>
		<view class="form">
			<view class="custom-input">
				<u-input v-model="tel" type="number" :clearable="true" placeholder="请输入手机号码" height="90" :placeholder-style="placeholderCls"
				 maxlength="11" :border="false" />
			</view>
			<view class="custom-input">
			 <u-input v-model="password" type="password" :clearable="true" placeholder="请输入密码" height="90" :placeholder-style="placeholderCls"
			 maxlength="11" :border="false" />
			</view>
			<u-button shape="circle" :disabled="!canHandle" :loading="loading" :ripple="true" class="default-login" :class="{active: canHandle}" @click="handleLogin">登录</u-button>
			<view class="group-btn">
				<navigator url="./index" hover-class="none" open-type="redirect">
					<view class="grey-btn">一键登录</view>
				</navigator>
				<navigator url="./code" hover-class="none" open-type="redirect">
					<view class="grey-btn">验证码登录</view>
				</navigator>
				<navigator url="./register?type=modifypwd" hover-class="none" open-type="navigate">
					<view class="grey-btn">忘记密码</view>
				</navigator>
			</view>
		</view>
		<bottom :third-party="true">
			<navigator url="./register?type=register" hover-class="none">
				<view class="grey-btn center">新用户？点击这里<text class="red">注册</text></view>
			</navigator>
		</bottom>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Bottom from './components/bottom.vue'
	import {phone} from '@/utils/rules.js'
	import md5 from '@/utils/md5.js'
	
	export default {
		components: {
			Bottom
		},
		data() {
			return {
				loading: false,
				tel: '',
				password: '',
				placeholderCls: "font-size: 32rpx;color: #737373"
			}
		},
		computed:{
			canHandle() {
				return this.tel !== '' && this.password !== '' ;
			}
		},
		methods: {
			regTel() {
				return phone.test(this.tel);
			},
			async login() {
				this.$store.dispatch('login',{
					loginCode: this.tel,
					password: md5(this.password)
				}).then(res => {
					this.$refs.uToast.show({
						title: '登录成功',
						type: 'success',
						callback: () => {
							uni.navigateBack({
								delta: 1
							})
							uni.$emit('page-redirect'); // 通讯入口页面继续下次页面操作
						}
					});
				}).catch(err => {
					// 登录失败
					this.loading = false;
					this.$refs.uToast.show({
						title: err?.resultMsg ?? '登录失败',
						type: 'error'
					});
				})
			},
			handleLogin() {
				if (!this.regTel()) {
					this.$refs.uToast.show({
						title: '请输入正确的手机号码',
						type: 'error',
					});
					return false;
				}
				this.loading = true;
				this.login()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 90rpx 45rpx 30rpx;

		.default-login {
			color: #fff;
			background: linear-gradient(90deg, rgba(254, 97, 79, 0.5) 0%, rgba(235, 77, 60, 0.5) 100%);
			width: 100%;
			&.active{
				background: linear-gradient(90deg, rgba(254, 97, 79, 1) 0%, rgba(235, 77, 60, 1) 100%);
			}
		}
		/deep/ uni-button[loading]:before {
			width: 44rpx;
			height: 44rpx;
		}
		/deep/ .u-btn--default--disabled{
			border-color: transparent !important;
			color: #fff !important;
		}
	}

	.title {
		font-size: 55rpx;
		width: 100%;
		margin-bottom: 50rpx;
		font-weight: 500;
	}

	.form {
		width: 100%;
		padding: 0 14rpx;
		box-sizing: border-box;
	}
	
	.custom-input{
		width: 100%;
		padding: 0 48rpx;
		box-sizing: border-box;
		background-color: #EFEFEF;
		border-radius: 50rpx;
		margin-bottom: 30rpx;
	}

	.wel-txt {
		font-size: 36rpx;
		width: 100%;
		margin: 14rpx 0;
		color: $font-color-grey;

		.red {
			color: $font-color-red;
			margin-left: 6rpx;
		}
	}

	.phone {
		font-size: 60rpx;
		font-weight: 600;
		margin: 70rpx 0;
	}

	.group-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.grey-btn {
		color: $font-color-grey;
		font-size: 26rpx;
		margin-top: 20rpx;
		text-align: center;

		.red {
			color: $font-color-red;
			margin-left: 6rpx
		}
	}
</style>
